<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>溢出 overflow</title>
</head>

<style>
   #d4 {
      width: 500px;
      height: 100px;
      background-color: green;
      overflow: auto
   }
   #d5 {
      width: 600px;
      height: 100px;
      background-color: pink;
   }
   #d6 {
      width: 400px;
      height: 120px;
      background-color: burlywood;
      overflow: auto
   }
   #d7 {
      width: 800px;
   }
</style>
<body>
   <div id="d4">
      我这个文档要溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出
      <div id="d5">
         我这个文档要溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢111出我这个文档要溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出我这个文档要溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出222溢出溢出溢出溢出我这个文档要溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出333溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出
      </div>
   </div>
   <p>横向溢出</p>
   <div id="d6">
      <div id="d7">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
         <img src="img/1wan.png" alt="">
      </div>
   </div>

</body>

</html>